<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<style>
			html,body {
				background-color: #efeff4;
			}
		</style>
		<script>
			mui.init();
		</script>
	</head>

	<body>

<script type="text/javascript" charset="utf-8">
	var list;
	// 扩展API加载完毕，现在可以正常调用扩展API
	function init() {
		list = plus.webview.create("pulldown-with-plus-content-custom.html", "pulldown-with-plus-content-custom.html", {
			top: "48px",
			bottom: "0px",
			bounce: "vertical"
		});
		plus.webview.currentWebview().append(list);
		// 实现列表可下拉刷新
		list.addEventListener("dragBounce", onPullStateChange, false);
		list.setBounce({
			position: {
				top: "100px"
			},
			changeoffset: {
				top: "50px"
			}
		});
	}
	mui.plusReady(init);

	// DOMContentLoaded事件处理
	var etext = null,eicon = null;
	document.addEventListener("DOMContentLoaded", function() {
		etext = document.getElementById("text");
		eicon = document.getElementById("icon");
	}, false);

	// 下拉状态改变
	function onPullStateChange(e) {
		switch (e.status) {
			case "beforeChangeOffset": //下拉可刷新状态
				pull1();
				break;
			case "afterChangeOffset": //松开可刷新状态
				pull2();
				break;
			case "dragEndAfterChangeOffset": //正在刷新状态
				list.evalJS("onRefresh();");
				pull3();
				break;
			default:
				break;
		}
	}

	function pull1() {
		etext.textContent = "下拉可刷新";
		eicon.style.webkitTransition = "all 0.3s ease-in";
		eicon.style.webkitTransform = "rotate(0deg)";
	}

	function pull2() {
		etext.textContent = "释放立即刷新";
		eicon.style.webkitTransition = "all 0.3s ease-in";
		eicon.style.webkitTransform = "rotate(180deg)";
	}

	function pull3() {
		etext.textContent = "正在刷新...";
		eicon.src = "../images/pull_fresh.png";
		eicon.style.webkitAnimation = "spin 1s infinite linear";
	}

	function pullReset() {
		etext.textContent = "下拉可刷新";
		eicon.src = "../images/pull_arrow.png";
		eicon.style.webkitTransition = "";
		eicon.style.webkitTransform = "";
		eicon.style.webkitAnimation = "";
	}
</script>
<style type="text/css">
	#pull {
		width: 24px;
		height: 100%;
		display: inline-block;
		margin: 0 1em;
	}
	#icon {
		height: 24px;
		vertical-align: middle;
	}
	@-webkit-keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
		}
	}
</style>
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">自定义下拉刷新</h1>
</header>
<div class="mui-content">
	<div style="text-align:center;height:44px;line-height:44px;">
		<div id="pull">
			<img id="icon" src="../images/pull_arrow.png" />
		</div><font id="text">下拉可刷新</font>
	</div>
</div>


</body>
</html>